<template>
  <div class="tree">
    <el-card style="height:100%">
      <el-tree
        ref="treeRef"
        :data="treeList"
        node-key="id"
        :props="defaultProps"
        icon-class=" "
        :default-expanded-keys="expandedkeys"
        :current-node-key="nodekey"
        @current-change="nodeCurrent"
      >
        <template #default="{node}">
          <div>
            <span class="label-content">{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
import { getOrgizationTree } from '@/api/ogization'
export default {
  data() {
    return {
      treeList: [],
      defaultProps: {
        label: 'name',
        id: 'id',
        children: 'children'
      },
      expandedkeys: [],
      nodekey: ''
    }
  },
  async created() {
    await this.initOrgizationTree()
    this.getOrgizationInfo()
  },
  methods: {
    async initOrgizationTree() {
      const res = await getOrgizationTree()
      this.treeList = JSON.parse(res)
      // console.log(JSON.parse(res))
      this.expandedkeys = [this.treeList[0].id, this.treeList[0].children[0].id]
      this.nodekey = this.treeList[0].children[0].children[0].id
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.nodekey) // 一定要加这个选中了否则样式没有出来
      })
    },
    getOrgizationInfo() {
      this.$emit('getOrgizationInfo', this.nodekey)
    },
    // 选中节点
    nodeCurrent(data) {
      this.nodekey = data.id
      this.getOrgizationInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.tree{
    height: auto;
    width: 224px;
    margin: 12px;
}
.el-tree{
  .el-tree-node{
    .el-tree-node__children{
      .el-tree-node__content{
        .label-content{
          font-size: 12px;
          color: #818693;
        }
      }
    }
  }
 }
.label-content{
  font-size: 14px;
}
// houver样式
.el-tree-node__content:hover {
  .label-content{
  color: #e15536 !important;
  }
}
::v-deep .el-tree-node {
  margin: 8px 0;
}
.is-current {
  >.el-tree-node__content{
    .label-content{
      background-color: #fff !important;
      color: #e15536 !important;
  }
  }
}
// 清除旋转
.el-tree ::v-deep .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
// 展开收起图标
::v-deep .el-tree{
 >.el-tree-node{
  >.el-tree-node__content{
    >.el-tree-node__expand-icon::before{
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      background: url('~@/icons/iconImg/treeclose.png') no-repeat;
      background-size: 100% 100%;
      vertical-align: top;
      }
    }
  }
}
::v-deep .el-tree{
 >.el-tree-node{
    >.el-tree-node__content{
      >.expanded.el-tree-node__expand-icon::before{
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('~@/icons/iconImg/treeopen.png') no-repeat;
        background-size: 100% 100%;
        vertical-align: top;
      }
    }
  }
}
::v-deep .el-tree{
  >.el-tree-node{
    >.el-tree-node__children{
      >.el-tree-node{
        >.el-tree-node__content{
          >.el-tree-node__expand-icon::before{
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            background: url('~@/icons/iconImg/zankai.png') no-repeat;
            background-size: 100% 100%;
            vertical-align: top;
          }
        }
      }
    }
  }
}
::v-deep .el-tree{
  >.el-tree-node{
    >.el-tree-node__children{
      >.el-tree-node{
        >.el-tree-node__content{
          >.expanded.el-tree-node__expand-icon::before{
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            background: url('~@/icons/iconImg/shouqi.png') no-repeat;
            background-size: 100% 100%;
            vertical-align: top;
          }
        }
     }
    }
  }
}
// 显示竖线
::v-deep .el-tree >.el-tree-node >.el-tree-node__children >.is-focusable::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 10px;
    border-left: 1px solid #e5e7ec;
    height:100%;
    z-index: 10;
}
::v-deep .el-tree >.el-tree-node .el-tree-node__children {
    position: relative;
}
::v-deep .el-tree >.el-tree-node >.el-tree-node__children >.is-focusable >.el-tree-node__children >.is-focusable::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 30px;
    border-left: 1px solid #e5e7ec;
    height: calc(100% + 3px);
}
</style>
